<template>
  <div id="Personal">
      <!-- 个人信息 -->
      <div class="basicInformation" v-if="isLogin">
        <div class="item" v-for="(item, i) in basic" :key="i">
          <label>{{item.text}}</label>
          <div class="inputFlat">
            <img v-if="item.name==='headImgUrl'" :src="item.val">
            <button v-if="item.name==='headImgUrl'&&!unInput">点击上传</button>
            <input :class="{ban: unInput}" :readonly="unInput&&!item.isInput" type="text"  v-if="item.name!=='headImgUrl'" :value="item.name==='sex'?{1:'男',2:'女'}[item.val]:item.val" >
          </div>
        </div>
        <!-- <dl class="toggle" v-if="true">
          <dt :class="{open:!unInput}" @click="unInput=false">修改</dt>
          <dd :class="{open:unInput}" @click="unInput=true">查看</dd>
        </dl> -->
        <div class="submit" style="padding-bottom:0;">
          <button class="cursor" @click="editPersonal">修改个人信息</button>
        </div>
      </div>
      <!-- 修改密码 -->
      <div class="resetPWD" v-if="isLogin">
        <dl>
          <dt>修改密码</dt>
          <dd>
              <span>获取验证码</span>
              <input type="text" placeholder="请输入验证码"  v-model="valCode" autocomplete="off">
              <button @click="sendSms">点击获取</button>
          </dd>
          <dd>
              <span>旧密码</span>
              <input type="password" v-model="oldPassword" autocomplete="new-password" placeholder="请输入不少于6位的密码">
          </dd>
          <dd>
              <span>请设置密码</span>
              <input type="password" v-model="newPassword" autocomplete="new-password" placeholder="请输入不少于6位的密码">
          </dd>
          <dd>
              <span>请再次输入密码</span>
              <input type="password" v-model="newPassword2" autocomplete="new-password" placeholder="两次密码需一致">
          </dd>
        </dl>
        <div class="submit">
          <button class="cursor" @click="updatePwd">提交</button>
        </div>
        <!-- loginOut -->
        <div class="submit" @click="loginOut">
          <button>退出当前账户</button>
        </div>
      </div>
      <!-- 未登录 -->
      <ul class="noShow" v-else>
        <li class="">
          <svg t="1579956206667" class="icon" viewBox="0 0 1583 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2207" width="128" height="128"><path d="M1346.884364 842.621304c11.694001 3.112423 11.898934 21.812578 0.589183 25.642267h-1150.930505c-9.862411 0-22.824436 3.099615-23.336769-12.424075 0-16.074448 12.974834-12.974834 22.837244-12.974834m1091.5383 168.160504c0.512333 8.312603-5.187372 12.462501-12.949217 12.974834m-715.882924-85.034472H362.116264c-10.387552 0-25.936859 4.162706-26.474808-11.924551-0.512333-16.586781 14.511833-13.499975 25.450142-13.499975h398.505429c10.899885 0 25.936859-3.099615 25.411718 13.499975-0.550758 16.100065-16.100065 12.436884-26.487617 12.436884-66.910692-0.512333-133.347476-0.512333-199.771452-0.512333z m557.315855 0h-105.835192c-9.862411 0-20.762295 0.525141-21.287437-12.424076-0.512333-12.974834 10.40036-13.487167 20.249962-13.487167h217.421324c9.849602 0 20.762295 0.499525 20.249963 13.487167-0.499525 12.974834-11.924551 12.424076-21.774154 12.424076h-109.024466z m364.255967-93.398309h31.124231c8.824936 0 15.587732 2.087757 16.100065 12.436884 0.525141 9.888027-5.699705 13.499975-15.062591 13.499975h-67.474258c-8.824936 0-15.574924-2.087757-16.100065-12.488118-0.525141-11.924551 7.774654-13.487167 17.637064-13.487166l33.775554 0.038425z m-587.902137 93.398309h-30.599089c-7.787462 0-13.487167-5.187372-12.974834-12.974834 0-7.774654 5.187372-12.462501 13.487167-12.462501 22.324911 0 44.624206-0.512333 66.9235 0 7.787462 0 12.424076 5.712513 11.924551 14.012308-0.550758 6.737179-5.187372 10.912693-11.924551 11.39941-12.962025 0.025617-24.912193-0.486716-36.836744 0.025617 0-0.512333 0 0 0 0z m-635.536298-208.686046c-2.536048 12.744284-9.324461 21.249012-22.440186 20.41647-13.128534-0.845349-20.749487-9.362886-19.494272-22.529844 0.858158-11.911743 8.479111-19.558313 20.775104-19.110022 13.090109-0.422675 19.878521 8.056437 21.159354 21.223396z m921.20038-611.853705c-14.434983-13.640867-39.142242-13.410317-75.005553 0-19.750438-21.41552-52.795917-26.577275-78.796818-12.308801-25.988092 14.268475-37.605243 43.958173-27.678792 70.765998-10.182619 6.814029-20.582979 13.858608-31.239505 21.466753-129.33847-67.871316-290.64652-46.481413-395.213689 52.386051-104.567169 98.880272-127.032971 251.273728-55.050183 373.349878-82.793015 105.39971-111.304348 172.336018-83.497473 198.810827 7.761845 6.801221 18.072547 10.310702 28.626607 9.747135 43.176865 0 113.571421-40.781708 181.596438-88.72327 129.146345 67.909741 290.26227 46.788813 394.944714-51.745634 104.682444-98.547256 127.596538-250.671737 56.151698-372.863161 66.718567-83.459048 119.01496-168.916196 85.162556-200.885776z m-122.690949 10.515635c12.7699-0.486716 24.591985 6.327313 29.894632 17.265623 5.328263 10.963927 3.112423 23.887527-5.58443 32.763696-8.696853 8.87617-22.209636 11.924551-34.185421 7.749037-11.988593-4.175514-20.057838-14.793616-20.493321-26.859059-0.589183-16.381848 13.013259-30.21484 30.36854-30.919297z m-41.511783 73.417321c18.367139 16.074448 45.059689 20.390854 67.9994 10.912693 22.952519-9.465352 37.771752-30.868064 37.758943-54.525041a65.155951 65.155951 0 0 0-1.780357-13.525591c25.450143-9.388503 35.49187-7.595337 37.848602-5.699705 10.771802 10.067344-13.371892 65.155951-80.807725 152.419072-22.10717-29.561615-49.401711-55.319157-80.69245-76.196728l19.673587-13.3847zM454.195316 802.185421c-4.726272-4.470106-3.804073-43.240907 79.245109-150.741182 21.979086 29.420723 49.132736 55.050183 80.333817 75.774053-92.040626 63.234703-148.935208 84.932006-159.578926 74.967129z m186.194626-93.756942c-102.556262-62.696753-154.519638-177.958873-131.285335-291.248512 23.234302-113.289638 117.042478-201.884825 236.966828-223.838295 119.949967-21.95347 241.962075 27.102417 308.360435 123.98459a2075.04606 2075.04606 0 0 1-149.780558 163.690399c-24.310202-12.821134-54.025517-12.449692-77.989893 0.986241-23.964377 13.423125-38.553059 37.874218-38.309701 64.156902 0.038425 12.142292 3.317356 24.079652 9.490969 34.736178-59.007955 52.309201-112.008806 94.576675-157.452745 127.532497zM914.513723 546.198229c0 24.681643-21.197779 44.701056-47.326763 44.701056-26.128984 0-47.326762-20.006604-47.326762-44.701056 0-24.70726 21.172162-44.701056 47.326762-44.701056 12.552159 0 24.591985 4.713464 33.468155 13.090109 8.863361 8.376645 13.858608 19.750438 13.858608 31.610947z m189.281433-74.544454c0.179317 98.252664-53.705308 189.537599-142.249262 241.052684-88.56957 51.527893-199.09261 55.921149-291.914545 11.604343 64.47711-47.711012 122.678141-97.778756 148.474108-120.359834 13.832991 10.746185 31.201081 16.612398 49.094312 16.650823 43.535498 0 78.835243-33.301646 78.912093-74.403562-0.07685-16.727673-6.173613-32.917396-17.265623-45.930655 26.269875-26.141792 86.955721-87.929154 143.017761-155.108821 21.044079 39.206284 31.982389 82.536849 31.931156 126.495022z m0 0" p-id="2208" fill="#cccccc"></path><path d="M775.248801 308.027418c-11.962976-10.09296-28.844349-13.15415-43.894132-7.941162-16.266573 4.73908-31.021764 13.30785-42.843848 24.912193-29.90744 28.729074-37.618052 63.362786-17.970081 81.922049 7.480062 6.814029 17.560214 10.451594 27.92215 10.067344 5.366688 0.025617 10.694952-0.678841 15.869515-2.100565 16.29219-4.803122 31.047381-13.359083 42.946315-24.912193 29.792165-28.319207 37.618052-63.516486 17.970081-81.947666z m-40.333417 60.788312c-8.018012 7.941162-17.970081 13.871416-28.985241 17.329665-6.980537 1.895632-11.822084 1.229599-13.128533 0-4.137089-3.804073 0-22.33772 17.982889-39.782659 8.043628-7.941162 18.072547-13.832991 29.087707-17.21439 6.865262-1.90844 11.822084-1.229599 13.128533 0 4.137089 3.778456 0.358633 22.363336-18.085355 39.667384z m-690.868264 253.732927" p-id="2209" fill="#cccccc"></path><path d="M1421.006143 767.513284c-3.752839 0-6.493821-5.930255-6.493821-9.26042v-43.497073c0-3.611948 5.225797-6.878071 8.658428-6.87807 3.752839 0 4.316406 3.586331 4.316406 6.87807v43.176865c0.038425 3.637564-2.702557 9.593436-6.481013 9.580628" p-id="2210" fill="#cccccc"></path><path d="M1453.257506 740.090659c-56.036424 2.049332-58.790214-0.909391-58.790213-4.201131 0-3.624756 3.073998-6.263271 6.519437-6.263271l42.613299 0.6148c3.752839 0 8.658428 2.343924 8.658428 5.635663 0 3.650373-5.238605 6.865262-8.658428 6.865262l9.657477-2.651323z m55.831491-558.12278c-6.096763 0-10.592485-10.118577-10.592485-15.792665V91.925351c0-6.160805 8.530345-11.758043 14.127583-11.758042 6.096763 0 7.031771 6.083955 7.03177 11.758042v73.66068c0.025617 6.224846-4.470106 16.394657-10.566868 16.381848z m0 0" p-id="2211" fill="#cccccc"></path><path d="M1545.848891 118.336118c6.096763 0 14.089158 3.996198 14.089158 9.657478 0 6.199229-8.543153 11.732426-14.089158 11.732426l-69.472357-1.037474c-6.135188 0-10.63091-5.072097-10.63091-10.694952 0-6.160805 5.008055-10.694952 10.63091-10.694952M73.839284 432.191324c-6.532246 0-11.348176-10.425977-11.348176-16.253765V339.548707c0-6.340121 9.157953-12.103868 15.139441-12.103868 6.532246 0 7.544104 6.276079 7.544103 12.103868v75.812478c0.012808 6.365738-4.764697 16.83014-11.335368 16.830139z m0 0" p-id="2212" fill="#cccccc"></path><path d="M113.26331 366.766398c6.532246 0 15.101016 4.111472 15.101016 9.939261 0 6.378546-9.145144 12.065443-15.101016 12.065442l-74.429179-1.101516c-6.570671 0-11.386601-5.212988-11.386601-11.002351 0-6.340121 5.366688-11.002352 11.386601-11.002352M452.55585 158.643919c-0.922199-30.009906-26.244259-54.653125-56.087657-54.204834-30.714364 0.448291-56.087657 26.423575-55.178266 56.881774 0.922199 30.458198 26.257067 55.062991 56.074849 54.640316 30.675939 0.025617 56.06204-26.423575 55.191074-57.317256z m-18.27748 2.67694c-0.922199 21.056887-19.148446 37.618052-39.641767 36.721469-19.571121-0.896583-35.581528-17.918847-35.581528-38.066344 0.4611-20.608596 17.829189-38.079151 38.719567-37.618051 20.480512 0.422675 37.40031 18.802622 36.503728 38.962926zM1106.420862 998.293691c-0.550758 16.100065-13.884225 13.231-24.258968 13.231-66.885075-0.512333-321.309651-0.845349-387.733627-0.845349H497.782047c-10.387552 0-25.936859 4.162706-26.474808-11.924551-0.512333-16.586781 14.511833-13.499975 25.450142-13.499975l584.559164-0.320209c10.899885 0 25.629459-3.253315 25.104317 13.359084M1278.462289 452.992045c-13.128534-0.845349-20.749487-9.362886-19.494271-22.529845 0.858158-11.911743 8.479111-19.558313 20.775104-19.110021 13.090109-0.422675 19.878521 8.056437 21.159353 21.223395-2.536048 12.744284-9.324461 21.26182-22.440186 20.416471" p-id="2213" fill="#cccccc"></path></svg>
          <span>还未登录</span>
        </li>
      </ul>
    <el-dialog title="修改个人信息" :visible.sync="dialogVisible">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="form.stuNo"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="email" label="邮箱" :rules="[
              { message: '请输入邮箱地址', trigger: 'blur' },
              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ]"
          >
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateUser">提交修改</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { Center } from './centerApi.js'
import { removeToken } from '@/utils/auth'
export default {
  name: 'Personal',
  data () {
    return {
      basic: [
        { name: 'headImgUrl', text: '个人头像', val: '' },
        { name: 'mobile', text: '账户', val: '2312312' },
        { name: 'name', text: '姓名', val: 'liu' },
        { name: 'sex', text: '性别', val: '男' },
        { name: 'schoolName', text: '学校', val: '厦门' },
        { name: 'stuNo', text: '学号', val: '342389' },
        { name: 'mobile', text: '手机', val: '17600000000' },
        { name: 'email', text: '邮箱', val: '121232323@qq.com' }
      ],
      unInput: true,
      valCode: '',
      userId: '',
      oldPassword: '',
      newPassword: '',
      newPassword2: '',
      isLogin: false,
      dialogVisible: false,
      form: {
        name: '',
        sex: '',
        stuNo: '',
        email: ''
      }
    }
  },
  methods: {
    async personal () { // 获取个人信息
      const res = await Center.getUserDetail()
      this.userId = this.$store.state.user.loginInfo.userId
      this.form.name = res.data.name
      this.form.sex = res.data.sex === 1 ? '男' : '女'
      this.form.stuNo = res.data.stuNo
      this.form.email = res.data.email
      if (res.code === '200') {
        this.basic = this.basic.map(el => {
          return {
            name: el.name,
            text: el.text,
            val: res.data[el.name]
          }
        })
        this.isLogin = true
      } else {
        this.isLogin = false
      }
    },
    editPersonal () { // 修改ge人信息
      this.dialogVisible = true
    },
    updateUser () { // 更新个人信息
      let postData = {}
      postData.sex = this.form.sex === '男' ? 1 : 2
      postData.name = this.form.name
      postData.stuNo = this.form.stuNo
      postData.email = this.form.email
      postData.id = this.userId
      this.$confirm('确定更新个人信息？', '个人信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        const res = await Center.updateUser(postData)
        if (res.code !== '200') {
          return this.$message.error(res.message)
        }
        this.$message({
          message: '更新成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.personal()
      })
    },
    async sendSms () { // 发送验证码
      const res = await Center.sendSms({ mobile: this.basic[1].val })
      if (res.code === '200') {
        this.$message({
          message: '发送成功，请注意查收',
          type: 'success'
        })
      }
    },
    async validateCode (valCode) { // 验证验证码
      let res = await Center.validateCode({
        mobile: this.basic[1].val,
        validateCode: valCode
      })
      if (res.code !== '200') {
        return this.$message.error(res.message)
      } else {
        return true
      }
    },
    async updatePwd () { // 修改密码
      if (!this.valCode) return this.$message.error('短信验证码未填入')
      if (this.validateCode(this.valCode)) {
        return
      }
      if (!this.oldPassword) return this.$message.error('旧密码未填入')
      if (!this.newPassword) return this.$message.error('设置密码未填入')
      if (!this.newPassword2) return this.$message.error('再次输入密码未填入')
      if (this.newPassword !== this.newPassword2) {
        return this.$message.error('设置密码与再次输入密码不一致')
      }
      this.$confirm('确定修改密码？', '修改密码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async () => {
        const res = await Center.updatePwd({
          userId: this.userId,
          oldPassword: this.oldPassword,
          newPassword: this.newPassword
        })
        if (res.code !== '200') {
          return this.$message.error(res.message)
        } else {
          this.$message('修改成功')
          this.loginOut()
        }
      })
    },
    loginOut () { // 退出登录
      removeToken()
      this.$router.push({ name: 'login' })
    }
  },
  mounted () {
    this.personal()
  }
}
</script>
<style scoped lang="scss">
#Personal{
 padding:10px;position: relative;
 .basicInformation{
     width: calc(55% - 20px);background: #fafafa;padding:20px 10px;position: absolute;left:0;top:0;height:100%;
     .item{
         line-height: 69px;height:69px;padding: 0 20px;border-bottom:solid 1px rgba(229, 229, 229, 1);
         label{
             font-size: 16px;color: #101D37;font-weight: bold
         }
         .inputFlat{
             float:right;height:100%;color: #91959a;
             img{
                 height:36px;border-radius: 50%;display: inline-block;margin-top: 17px
             }
             button{
               height:36px;width:102px;display: inline-block;vertical-align: top;margin-top: 17px;margin-left: 10px;border-radius: 10px;border: solid 1px rgba(229,229,229,1);padding:0 20px;background: #ffff;
             }
             input.ban{
               text-align: right;font-size:14px;color: #91959a;border: none;background: #fafafa;padding:0;
             }
             input{
               width: 200px;height:36px;border: solid 1px rgba(229,229,229,1);padding:0 20px;outline: none;border-radius: 10px;font-size: 16px;
             }
         }
     }
     .toggle{
       position: absolute;top: 20px;left: 50%;width: 142px;margin-left: -70px;border: solid 1px #91959a;height: 30px;border-radius: 15px;overflow: hidden;cursor:pointer;
       dt{
         width:70px;float:left;height: 30px;line-height: 28px;text-align: center;font-size: 14px;background: #eaeaea;border-right: solid 1px #91959a;color: #91959a
       }
       dd{
         width:70px;float:left;height: 30px;line-height: 28px;text-align: center;font-size: 14px;background: #eaeaea;color: #91959a
       }
       .open{
         font-size: 16px;background: #009CF6;color: #fff;
       }
     }
     .submit{
      width: 100%;background: #fafafa;padding: 50px 0 30px;text-align: center;
       button{
         height: 50px;width: calc(100% - 100px);background: #009CF6;color: #fff;border: none;border-radius: 10px;font-size: 16px;outline:none;
       }
     }
     .submit:hover button{
       color: #fff;background: #009CF6;cursor:pointer;
     }
 }
 .resetPWD{
     height: auto;width: calc(45%);float: right;
     dl{
       background: #fafafa;padding:20px;
       dt{
         font-size: 16px;color: #101D37;font-weight: bold;padding-bottom: 30px;
       }
       dd{
         padding: 10px;position: relative;
         span{
           font-size: 14px;color: #91959a;display: block;margin-bottom: 20px;
         }
         input{
           width: 100%;height: 50px;padding: 0 10px;border-radius: 10px;border: solid 1px #91959a;outline: none;font-size: 14px
         }
         button{
           color: #91959a;text-align: center;position: absolute;bottom: 25px;right: 20px;height: 20px;width: 70px;border: none;border-left: solid 1px #91959a;font-size: 12px;cursor: pointer;background: none;outline: none
         }
       }
     }
     .submit{
       width: 100%;background: #fafafa;padding: 0 0 30px;text-align: center;
       button{
         height: 50px;width: calc(100% - 100px);background: #009CF6;color: #fff;border: none;border-radius: 10px;font-size: 16px;outline:none;
       }
     }
     .loginOut{
       width: 100%;padding: 20px 0 20px;text-align:center;margin-top:20px;
       button{
         height: 50px;width: calc(100% - 100px);background: #eaeaea;color: #fb5651;border: none;border-radius: 10px
       }
     }
 }
 .noShow{
      height: 600px;text-align: center;position: relative;
      li{
          position: absolute;top: 50%;left: 50%;width: 128px;margin-left: -64px;margin-top: -71px;height: 142px;
          svg {
              height: 128px;
          }
          span{
              font-size: 14px;line-height: 1;color: #ccc
          }
      }
  }
}
#Personal::after{
  content:'';clear:both;display:block
}
</style>
